<template>
  <div class="app-container">
    	<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>账户充值</span>
				</div>
					<el-form ref="form" :model="form" :rules="rules" label-width="112px">
						<el-row>
							<el-col :span='8' :offset='6'>
		        <el-form-item label="代理商" prop='userName'>
           <el-select :value="form.userName" placeholder='请选择客户' :clearable='clearable' @clear="clearHandle" ref='chooseUser' >
		        <el-option :value="form.userName" label="" style='height:200px;overflow-y: scroll;width: 100%;background: white;'>
						  <el-tree  :data="userList" :props="props" :accordion="accordion"  @node-click="handleNodeClick"></el-tree>
		       </el-option>
					 </el-select>
        </el-form-item>

        	<el-form-item label="充值金额(元)" prop="rechargeMoney">
         	   <el-input type='text' v-model='form.rechargeMoney'></el-input>
        	</el-form-item>
        	<el-form-item label="外部订单号" prop="serialNumber">
         	    <el-input type='text' v-model='form.serialNumber'></el-input>
        	</el-form-item>
        		<el-form-item label="备注" prop="mark">
         	   <el-input type='text' v-model='form.mark'></el-input>
        	</el-form-item>
        	</el-col>
				</el-row>
					</el-form>
					 
				<el-row>
					<el-col :span='8' :offset='8'>
						<el-button type="primary" @click='chargeSubmit'>充值</el-button>
					<el-button>取消</el-button>
					</el-col>
				</el-row>
			</el-card>
  </div>
</template>

<script>
import { getUserList1,rechargeAmount } from "@/api/order/list";

export default {
  name: "Dept",
    props:{
	   	 props: {
	      children: 'children',
	      label: 'label',
	    },
       	 /* 自动收起 */
	    accordion:{
	      type:Boolean,
	      default:()=>{ return false }
			},
			 /* 可清空选项 */
	    clearable:{
	      type:Boolean,
	      default:()=>{ return true }
			},
     },
  data() {
    return {
    	//上传文件list
    	fileList: [],
      form:{
      	userName:'',
      	userId:'',
      	rechargeMoney:'',
      	mark:''
      },
      radio: 3,
      rules:{
      	userName:[{ required: true, message: "代理商不能为空", trigger: "blur" }],
      	rechargeMoney: [
          { required: true, message: "充值金额不能为空", trigger: "change" }
        ],
        serialNumber:[{ required: true, message: "外部订单号不能为空", trigger: "blur" }],
      },
      userList:[],  //用户列表
    };
  },
  created() {
  getUserList1().then((res)=>{  //用户列表接口 
	  	 	console.log(res);
	    	this.userList = res.data.children;
	    	console.log( res.data.children);
	    })
  },
  methods: {
  	handleNodeClick(a,e){  //点击选着客户  卡导入弹框
  		for(var key in a){
  			if(key=='agentId'){
  				this.form.userId = a[key]
  				this.form.enterpriseId = undefined
  			}else if(key=='enterpriseId'){
  				this.form.enterpriseId = a[key]
  				this.form.userId = e.parent.data.agentId;
  			}
  		}
  		this.$refs.chooseUser.blur();
  		this.form.userName = a.label;
  			console.log(this.form)
  	},
  	clearHandle(){  //清楚选项  卡导入弹框
  		this.form.userName = '';
  		this.form.enterpriseId = undefined
  		this.form.agentId = undefined
  		this.userId = undefined
  	},
  	chargeSubmit(){
  		this.$refs["form"].validate(valid => {
        if (valid) {
        	console.log(this.form);
					rechargeAmount(this.form).then((res)=>{
						if(res.code==200){
							 this.$alert('充值成功', '充值', {
			          confirmButtonText: '确定',
			        });
			        this.resetForm("form");
			        this.$store.dispatch("publicCardInfo/updataAllCardInfo");
						}
					})
					
        }
      });
  	}
  	
  }
};
</script>